<template>
  <div class="home">
    <!-- 展厅入口 -->
<!--    TODO 入口:active 事件导致个别鼠标事件不触发-->
    <div class="entrance" @mousedown="turnToHall">
      <div class="entrance-block">
        <div class="entrance-icon">&uarr;</div>
      </div>
      <div class="entrance-triangle"></div>
    </div>
    <div class="entrance-shade"></div>
    <!-- 项目介绍 -->
    <div id="page0" class="page bg">
      <div class="introduce-content">
        <div class="introduce-content__header">
          <div class="title zoom introduce-content__header__title">
            传统文化
            <span id="transfer" @click="jumpToHall">3D</span>
            展厅
          </div>
          <p class="miniTitle introduce-content__header__miniTitle">
            {{ introduce.miniTitle }}
          </p>
        </div>
        <div class="introduce-content__main">
          <p
            class="text text--indent introduce-content__main__text"
            v-for="(text, index) of introduce.text"
            :key="index"
          >
            {{text}}
          </p>
        </div>
        <div class="introduce-content__footer">
          <img class="zoom" :data-src="introduce.imgUrl"/>
        </div>
      </div>
    </div>

    <!-- 项目灵感 -->
    <div id="page1" class="page  inspiration-content">
        <div class="inspiration-content__left">
          <div class="title zoom inspiration-content__left__title">
            项目<span>灵</span>感
          </div>
          <p class="miniTitle inspiration-content__left__miniTitle">
            {{inspiration.miniTitle}}
          </p>
          <ul
              class="text inspiration-content__left__text"
              v-for="(t, index) of inspiration.text"
              :key="index"
          >
            <li class="subTitle">
              <span>{{t.title}}</span>
            </li>
            <p>{{t.description}}</p>
          </ul>
        </div>
        <div class="inspiration-content__right">
          <img class="zoom" :data-src="inspiration.imgUrl"/>
        </div>
    </div>

    <!-- 项目亮点 -->
    <div id="page2" class="page bg">
      <div class="highlights-content">
          <div class="highlights-content__header">
            <div class="title zoom highlights-content__header__title">
              项目<span>亮</span>点
            </div>
            <p class="miniTitle highlights-content__header__miniTitle">
              {{highlights.miniTitle}}
            </p>
          </div>
          <div class="highlights-content__main">
            <p
              class="text text--indent highlights-content__main__text"
              v-for="(text, index) of highlights.text"
              :key="index"
            >
              {{text}}
            </p>
          </div>
          <div class="highlights-content__footer">
            <div class="highlights-content__item">
              <img
                  :disableLazyload="true"
                  :src="highlights.dataList[highlights.currentIndex]"
              />
            </div>
            <div class="highlights-content__page" v-if="highlights.dataList.length > 1">
              <ul>
                <li @click="checkPage(prevIndex)">&lt;</li>
                <li
                v-for="(item,index) in highlights.dataList"
                :key="index"
                @click="checkPage(index)"
                :class="{'current': highlights.currentIndex === index}">  {{index + 1}}</li>
                <li @click="checkPage(nextIndex)">&gt;</li>
              </ul>
            </div>
          </div>
          <div>
          </div>
      </div>
    </div>

    <!-- 技术说明 -->
    <div id="page3" class="page technical-description">
        <div class="technical-description__left">
          <div class="title zoom technical-description__left__title">
            技术<span>说</span>明
          </div>
          <p class="miniTitle technical-description__left__miniTitle">
            {{technicalDescription.miniTitle}}
          </p>
          <p class="text technical-description__left_text">
            {{technicalDescription.introduction}}
          </p>
          <div v-for="(c,index) of technicalDescription.leftCard" :key="index">
            <card :info="c"></card>
          </div>
        </div>
        <div class="technical-description__right">
          <div v-for="(c,index) of technicalDescription.rightCard" :key="index">
            <card :info="c"></card>
          </div>
        </div>
    </div>

    <!-- 难点突破 -->
    <div id="page4" class="page bg2 details-content">
      <div class="difficult-breakthrough">
        <div class="difficult-breakthrough__header">
          <div class="title zoom difficult-breakthrough__header__title">
            难点<span>突</span>破
          </div>
          <p class="miniTitle difficult-breakthrough__header__miniTitle">
            {{difficultBreakthrough.miniTitle}}
          </p>
        </div>
        <div class="difficult-breakthrough__footer">
<!--          TODO some bug need to fix-->
          <swiper
            style="margin: 20px 0;"
            :options="cardSwiperOption"
          >
            <swiper-slide
                v-for="(card, index) of difficultBreakthrough.cardList"
                :key="index"
            >
              <div class="item-main">
                <h2 class="item__title">{{card.title}}</h2>
                <div class="item__content">
                  <template>
                    <h3 class="item__subTitle">具体描述</h3>
                    <p class="text item__text">{{card.description}}</p>
                  </template>
                  <template>
                    <h3 class="item__subTitle">解决方法</h3>
                    <p class="text item__text">{{card.solution}}</p>
                  </template>
                </div>
              </div>
            </swiper-slide>
            <div class="swiper-button-prev" slot="button-prev"></div>
            <div class="swiper-button-next" slot="button-next" ></div>
            <div class="swiper-pagination" slot="pagination"></div>
          </swiper>
        </div>
      </div>
    </div>

    <!-- 团队成员 -->
    <div id="page5" class="page member-content">
        <div class="member-content__header">
          <div class="title zoom member-content__header__title">
            团队成员
          </div>
          <div class="miniTitle member-content__header__miniTitle">
            {{memberContent.miniTitle}}
          </div>
        </div>
        <div class="member-content__main">
          <div
            class="member-content__main__item"
            v-for="(c,index) in memberContent.cards"
            :key="index"
          >
            <memberCard :info="c"></memberCard>
          </div>
        </div>
    </div>

    <!-- 团队结语 -->
    <div class="footer">
      <div class="footer__conclusion">
        <div class="subTitle footer__conclusion__title">团队结语</div>
        <p>{{ memberContent.conclusion }}</p>
      </div>
      <div class="footer__infos">
        <div
        class="footer__info-item"
        v-for="(info, index) of memberContent.infos"
        :key="index"
        >
          <div class="footer__info-item__name">{{info.name}}</div>
          <template>
            <i class="iconfont icon-github-fill"></i>
            <a class="footer__info-item__link" :href="info.link" target="_blank">
              GitHub</a>
          </template>
          <div class="footer__info-item__wechat">
            <i class="iconfont icon-wechat-fill"></i>
            {{info.wechat}}
          </div>
          <div class="footer__info-item__qq">
            <i class="iconfont icon-QQ-circle-fill"></i>
            {{info.qq}}
          </div>
        </div>
      </div>
      <div class="footer__copyright">
        <p>可视化生产大队</p>
        <p>&copy; 2022 All rights reserved.</p>
      </div>
    </div>

  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
import card from '../components/Card';
import memberCard from'../components/MemberCard';
import { Swiper, SwiperSlide } from 'vue-awesome-swiper';
import 'swiper/css/swiper.css';

export default {
  name: 'Home',
  components:{
    card,
    memberCard,
    Swiper,
    SwiperSlide
  },
  data(){
    return{
      cardSwiperOption:{
        autoplay: true,
        delay: 3000,
        spaceBetween: 30,
        centeredSlides: true,
        observeParents: true,
        loop: true,
        slidesPerView: 3,
        pagination: {
          el: '.swiper-pagination',
          clickable: true
        },
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        },
      },
      introduce:{
        miniTitle: 'the 3D Exhibition Hall of Traditional Culture',
        text:[
          '本项目采用Web3D的方法将我国传统节日进行了可视化的展示，搭建了浏览器中的虚拟展览馆。通过blender建模将相关节日代表物进行建模，利用A-Frame与Vue将模型按照时间顺序放置于展览馆中利用浏览器进行交互。用户可通过操作人物小球在展览馆中游玩参观，更好的去体验了解中国传统文化节日。'
        ],
        imgUrl: 'https://gitee.com/yokirrr/image-bed/raw/master/images/image_1.jpeg'
      },
      inspiration:{
        miniTitle: 'Inspirations of the Project',
        text:[
          {
            title: '传统文化',
            description: '在中国，“文化”一词，古已有之。“文”的本义，系指各色交错的纹理，有文饰、文章之义。“化”本义为变易、生成、造化，所谓“万物化生”，其引申义则为改造、教化、培育等。中国传统文化(traditional culture of China)是中华文明演化而汇集成的一种反映民族特质和风貌的民族文化，是民族历史上各种思想文化、观念形态的总体表征，是指居住在中国地域内的中华民族及其祖先所创造的、为中华民族世世代代所继承发展的、具有鲜明民族特色的、历史悠久、内涵博大精深、传统优良的文化。'
          },
          {
            title: '线上展厅',
            description: '前端即网站前台部分，运行在PC端，移动端等浏览器上展现给用户浏览的网页。随着互联网技术的发展，HTML5，CSS3，前端框架的应用，跨平台的响应式网页设计，合适的动效设计，能给用户带来极高的用户体验。中华传统文化由来已久，一些人逐渐遗忘了传统节日背后的故事，有没有一种可能，结合前端与传统文化，去创造一个新的体验方式，让人们重拾对传统文化的兴趣呢？\n' +
                '我们的团队想到了，让人们在立体的展厅中游览，以各个节日的标志性模型为指引，不仅可以获得比以往更加直观、更加新奇的体验， 更可以激发人们探索的欲望，达到传播传统文化的目的。'
          }
        ],
        imgUrl:'https://gitee.com/yokirrr/image-bed/raw/master/images/image_2.png'
      },
      highlights:{
        miniTitle: 'Highlights of the Project',
        text:[
          '该项目为纯前端项目，使用的技术栈包括Vue、Three.js等，都是当今较为流行的前端技术。',
          '同时，该项目由两个部分共同组成，让用户在进行展厅体验的同时，也能通过官网去更好的了解我们的项目以及开发人员。'
        ],
        dataList:[
          "https://gitee.com/yokirrr/image-bed/raw/master/images/image_3_1.jpg",
          "https://gitee.com/yokirrr/image-bed/raw/master/images/image_1.jpeg"
        ],
        currentIndex: 0,
      },
      technicalDescription:{
        miniTitle: 'Technical Description of the Project',
        introduction: '本次3D传统文化展厅项目使用的技术栈主要是Vue.js、Three.js、A-Frame以及jQuery，使用的开发工具主要是VS Code、Webstorm以及Blender，使用的仓库是Gitee。',
        leftCard:[{
          index: '02',
          title: 'Three.js',
          imgUrl: 'https://gitee.com/yokirrr/image-bed/raw/master/images/image_5.png',
          introduction: '轻量级开源的JavaScript 3D引擎,传播最广泛的WebGL三维引擎。对WebGL底层的东西进行了封装，让非计算机图形学领域的人也可以实现三维世界。',
          features: ['功能强大','速度很快','扩展性强','内置文件格式支持']
        }],
        rightCard:[{
          index: '01',
          title: 'Vue.js',
          imgUrl: 'https://gitee.com/yokirrr/image-bed/raw/master/images/image_7.png',
          introduction: 'Vue是一套用于构建用户界面的渐进式框架，与其它框架不同的是，Vue被设计为可以自底向上逐层应用。',
          features: ['功能强大','方便易学','数据响应','轻量级框架']
        },{
          index: '03',
          title: 'A-Frame',
          imgUrl: 'https://gitee.com/yokirrr/image-bed/raw/master/images/image_6.png',
          introduction: 'A-Frame是一个用来构建虚拟现实（VR）应用的网页开发框架，其基于HTML，容易上手。但是A-Frame不仅仅是一个3D场景渲染引擎或者一个标记语言。其核心思想是基于Three.js来提供一个声明式、可扩展以及组件化的编程结构。',
          features: ['声明式HTML','高性能','工具无关性','可视化检测工具']
        },
        ],
      },
      difficultBreakthrough:{
        miniTitle: 'Difficulties and Breakthroughs of the Project',
        cardList: [
          {
            title: '人物动作控制',
            description: 'aframe框架提供的wasd-controls无法提供旋转效果。',
            solution: '监听keyDown和keyUp事件，w控制人物前进，a向左旋转，d向右旋转。渲染参数以及移动速度参数十分关键，选用适当的移动速度以防止穿模。'
          },
          {
            title: '3D汉字生成及布局',
            description: 'aframe的text组件无法显示中文字体。',
            solution: '通过aframe暴露的接口操作Threejs，寻找合适的中文字体处理成Threejs字体加载器能处理的字体，并通过参数控制达到理想效果。'
          },
          {
            title: '碰撞检测',
            description: '不能简单使用aframe-physics的static-body达到理想碰撞检测效果。',
            solution: '不断试验找出合适的static-body的组件边界，并用另一个不带static-body属性的组件包裹边界，达到视觉上的精确碰撞效果(碰撞外层组件显得是碰撞里层真正有碰撞效果的组件)。'
          },
          {
            title: '视野跟随',
            description: '难以实现合适的视野跟随效果。',
            solution: '经过多次思考想到设置外层组件包裹人物，相机置于人物组件平级，并设置合适参数就能达到人物移动或旋转，相机跟着移动和旋转的效果。'
          },
          {
            title: '模型加载性能',
            description: '导出的模型大小过大。',
            solution: '1、调整贴图：使用jpg格式贴图代替较大尺寸贴图；2、模型复用：利用aframe框架的资源缓存性能更好的特点，通过拼接各小模型达到视觉上是一个大模型的效果。实现方式为类似模型仅导出一次，通过调整大小、位置、旋转等参数在场景中拼接成一个整体。这样就比直接导出整体模型大小小得多；3、使用纯色替代贴图。'
          },
          {
            title: '触发弹窗',
            description: 'aframe与vue的协作方式较难厘清。',
            solution: 'vue的data设置活跃弹窗号，封装弹窗html结构，添加各节日或彩蛋的数据，设置弹窗默认隐藏。当人物碰到相应展台或彩蛋时，通过vue的bind设置aframe组件中的id会在aframe组件中联动设置vue中$data的活跃弹窗id，弹窗中数据就会切换到该活跃节日或彩蛋的数据，同时控制弹窗显示。'
          },
          {
            title: '图片懒加载',
            description: '官网中需展示较多的图片，当网络拥塞时容易影响网页的展示效果，且会造成一定的页面重排问题。',
            solution: '在压缩图片大小处理的基础上，给img标签绑定自定义属性data-src；通过监听scroll事件并配合节流函数，当图片滚动到网页的可视区域时，将图片的data-src属性赋值给图片的src属性，从而达到懒加载的效果。同时为了避免页面重排，需要给img标签加上min-height，实现类似于骨架屏的占位效果。'
          },
          {
            title: '轮播图',
            description: '自定义轮播图的图片展示与懒加载存在冲突问题。',
            solution: '给img标签绑定自定义属性disableLazyload，并通过该属性来判断是否进行懒加载处理，若否则跳过该img标签的懒加载处理。'
          }
        ]
      },
      memberContent:{
        miniTitle: 'Members of the Team',
        cards:[
          {
            imageUrl: 'https://gitee.com/yokirrr/image-bed/raw/master/images/avatar_cls.jpg',
            name: '曹丽诗',
            introduction: '一个普通的前端开发。',
          },{
            imageUrl: 'https://gitee.com/yokirrr/image-bed/raw/master/images/avatar_wxy.jpg',
            name: '吴习源',
            introduction: '嗝。',
          },{
            imageUrl: 'https://gitee.com/yokirrr/image-bed/raw/master/images/avatar_zzk.jpg',
            name: '朱志康',
            introduction: '热衷于技术学以致用(学习、生活)的前端开发。',
          },{
            imageUrl: 'https://gitee.com/yokirrr/image-bed/raw/master/images/avatar_cyq.png',
            name: '陈雅琦',
            introduction: 'keep going on.',
          },{
            imageUrl: 'https://gitee.com/yokirrr/image-bed/raw/master/images/avatar_shimmery.jpg',
            name: '袁杰',
            introduction: 'Everything that kills me makes me feel alive.',
          },
        ],
        conclusion: '学习是一条永无止境的道路，当你踏上这条路的时候，就不要考虑前方会有多少困难，一步一步，努力向前，成功的大门迟早会为你打开！',
        infos:[
        {
          name: '曹丽诗',
          link:'https://github.com/xiaocao12306',
          wechat: '18163489352',
          qq: '3027478654'
        },{
          name: '吴习源',
          link:'https://github.com/RIOTSAKURA',
          wechat: '18932012105',
          qq: '1192587294'
        },{
          name: '朱志康',
          link:'https://github.com/ZZK520',
          wechat: '19858119751',
          qq: '752330461'
        },{
          name: '陈雅琦',
          link:'https://github.com/Kidoi',
          wechat: 'c1132834498',
          qq: '1132834498'
        },{
          name: '袁杰',
          link:'https://github.com/shimmeryy',
          wechat: '18788873360',
          qq: '63025407'
        }
        ]
      }
    }

  },
  computed:{
    ...mapState(['pageIndex']),
    prevIndex() {
      if(this.highlights.currentIndex === 0) {
        return this.highlights.dataList.length - 1;
      }else{
        return this.highlights.currentIndex - 1;
      }
    },
    nextIndex() {
      if(this.highlights.currentIndex === this.highlights.dataList.length - 1) {
        return 0;
      }else {
        return this.highlights.currentIndex + 1;
      }
    }
  },
  mounted(){
    // 导航条自动导航
    window.addEventListener("scroll", this.throttle(this.indexPage, 500));
    // 图片懒加载
    this.imgLazyLoad();
    window.addEventListener("scroll", this.throttle(this.imgLazyLoad, 100));
  },
  methods:{
    ...mapMutations['SET_PAGE'],
    turnToHall() {
      window.open('https://vercel-traditional-culture-3d-exhibition-hall-zzk520.vercel.app/', '_self');
    },
    jumpToHall() {
      window.open('https://vercel-traditional-culture-3d-exhibition-hall-zzk520.vercel.app/', '_blank');
    },
    throttle(func, delay){
      let timer;
      return function(){
        if(timer) return;
        timer = setTimeout(()=>{
          func.apply(this);
          timer = null;
        }, delay);
      }
    },
    indexPage(){
      //求当前高度
      let scrollY = document.documentElement.scrollTop || document.body.scrollTop;
      //求page节点高度
      let pages = document.querySelectorAll(".page");
      let heightList = [];
      pages.forEach((p)=>{
        heightList.push(p.offsetTop);
      })
      //超过最后一页高度则设为最后一页
      if(scrollY > heightList[heightList.length-1]){
        this.$store.commit('SET_PAGE', heightList.length-1);
        return;
      }
      //遍历爬楼梯，求当前是第几页
      for(let i = 0; i < heightList.length; i++){
        if(scrollY + 1 < heightList[i]){
          this.$store.commit('SET_PAGE', i-1);
          break;
        }
      }
    },
    imgLazyLoad(){
      const images = document.querySelectorAll('img');
      images.forEach(image=>{
        if(!image.getAttribute('disableLazyload')) {
          const imageTop = image.getBoundingClientRect().top;
          if(imageTop < window.innerHeight){
            const data_src = image.getAttribute('data-src');
            image.setAttribute('src', data_src);
          }
        }
      })
    },
    checkPage(index) {
      this.highlights.currentIndex = index;
    }
  }
}
</script>

<style scoped lang="scss">
  $light-yellow: #F0DFB3;
  $middle-yellow: #ddbf90;
  $dark-yellow: #DCB613;
  $orange: #FF5805;
  $dark-red: #9D2932;
  $green: #789263;
  $blue: #177CB2;
  $dark-blue: #2b2e39;
  $purple: #7468BE;
  $space: 100px;

  .bg {
    background-color: black;
  }

  .bg2{
    background-color: $dark-blue;
  }

  .title {
    font-size: 53px;
    font-weight: bold;
  }

  .subTitle {
    font-size: 25px;
    font-weight: bold;
  }

  .miniTitle {
    font-family: sans-serif;
    font-weight: bold;
  }

  .text{
    line-height: 1.5em;
  }

  .text--indent {
    text-indent: 2em;
  }

  .icon {
    color: white;
  }

  .zoom {
    transition: .5s;
    &:hover {
        transform: scale(1.05);
    }
  }

  #transfer {
    cursor: pointer;
    transition: all 2.5s ease;
    -webkit-transition: all 2.5s ease;
    &:hover {
      color: #fff;
      animation: Glow 2.5s ease infinite alternate;
      -webkit-animation: Glow 2.5s ease infinite alternate;
    }
  }
  @keyframes Glow {
    from {
      text-shadow: 0 0 5px #fff,
      0 0 10px #fff,
      0 0 15px #fff,
      0 0 20px $orange,
      0 0 35px $orange,
      0 0 40px $orange,
      0 0 50px $orange,
      0 0 75px $orange;
    }
    to {
      text-shadow: 0 0 3px #fff,
      0 0 5px #fff,
      0 0 8px #fff,
      0 0 15px $orange,
      0 0 18px $orange,
      0 0 20px $orange,
      0 0 25px $orange,
      0 0 38px $orange;
    }
  }
  @-webkit-keyframes Glow {
    from {
      text-shadow: 0 0 5px #fff,
      0 0 10px #fff,
      0 0 15px #fff,
      0 0 20px $orange,
      0 0 35px $orange,
      0 0 40px $orange,
      0 0 50px $orange,
      0 0 75px $orange;
    }
    to {
      text-shadow: 0 0 3px #fff,
      0 0 5px #fff,
      0 0 8px #fff,
      0 0 15px $orange,
      0 0 18px $orange,
      0 0 20px $orange,
      0 0 25px $orange,
      0 0 38px $orange;
    }
  }

  .entrance-shade {
    position: fixed;
    z-index: 5;
    top: -100%;
    width: 100%;
    height: 100%;
    background: white;
    transition: .5s;
  }

  .entrance {
    position: fixed;
    top: -50px;
    left: 20px;
    transition: .5s;

    &:hover {
      top: 0;
      cursor: pointer;
    }

    &:active + .entrance-shade {
      top: 0;
    }

    &:active {
      top: 100%;
    }

    .entrance-block {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 40px;
      height: 100px;
      background: greenyellow;
      transition: .5s;

      .entrance-icon {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        color: greenyellow;
        font-size: 25px;
        user-select: none;
        transition: .5s;

        &:hover {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 100%;
          height: 100%;
          color: red;
          font-size: 25px;
        }
      }
    }

    .entrance-triangle {
      border-style: solid;
      border-width: 0px 20px 20px 20px;
      border-color: transparent greenyellow transparent greenyellow;
      width: 0px;
      hieght: 0px;
    }
  }

  .introduce-content {
      width: 55%;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      align-items: center;

      .introduce-content__header {
        margin-top: $space;
        display: flex;
        flex-direction: column;
        align-items: center;
        .introduce-content__header__title {
          color: white;
        }
        .introduce-content__header__miniTitle, span {
          color: $dark-yellow;
        }
      }
      .introduce-content__main {
        margin-top: 20px;
        .introduce-content__main__text {
          margin-top: 10px;
          color: white;
        }
      }
      .introduce-content__footer {
        margin: 30px 0 $space 0;
        img{
          width: 100%;
          min-height: 200px;
        }
      }
  }

  .inspiration-content {
    width: 80%;
    margin: 0 auto;
    padding: $space 0;
    display: flex;
    justify-content: space-around;
    align-items: center;
    .inspiration-content__left {
      flex: auto;
      padding-right: $space;
      .inspiration-content__left__title {
        color: $dark-red;
        span {
          color: $orange;
        }
      }
      .inspiration-content__left__miniTitle {
        color: $light-yellow;
      }
      .inspiration-content__left__text {
        margin: 30px 0;
        list-style: inside;
        li {
          color: $dark-red;
          span {
            color: black;
          }
        }
        p {
          margin: 10px 0;
        }
      }
    }
    .inspiration-content__right {
      flex: none;
      width: 45%;
      img {
        width: 100%;
        min-height: 250px;
      }
    }
  }

  .highlights-content {
    width: 55%;
    margin: 0 auto;
    padding: $space 0;
    display: flex;
    flex-direction: column;
    align-items: center;

    .highlights-content__header {
      display: flex;
      flex-direction: column;
      align-items: center;
      .highlights-content__header__title {
        color: white;
        span {
          color: $green;
        }
      }
      .highlights-content__header__miniTitle {
        color: $green;
      }
    }
    .highlights-content__main {
      margin-top: 20px;
      .highlights-content__main__text {
        margin-top: 10px;
        color: white;
      }
    }
    .highlights-content__footer {
      width: 800px;
      height: 500px;
      margin-top: 30px;
      ul li {
        list-style: none;
        float: left;
        width: 30px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        cursor: pointer;
        user-select: none;
        color: rgba(255,255,255,.8);
        font-size: 14px;
      }
      img {
        width: 100%;
        display: block;
        height: 500px;
        object-fit: contain;
      }
      .highlights-content__page{
        background: rgba(0,0,0,.5);
        right: 0;
        bottom: 0;
        width: 100%;
        ul{
          float: right;
        }
      }
      .current {
        color: #ff6700;
      }
    }
  }

  .technical-description {
    width: 70%;
    margin: 0 auto;
    padding: $space 0 150px 0;
    display: flex;
    justify-content: space-between;

    .card {
      margin-top: 60px;
    }

    .technical-description__left {
      width: 40%;
      .technical-description__left__title {
        color: $dark-yellow;
        span{
          color: $blue;
        }
      }
      .technical-description__left__miniTitle {
        color: $light-yellow;
      }
      .technical-description__left_text {
        margin: 20px 0;
      }
    }
    .technical-description__right {
      width: 40%;
    }
  }

  .difficult-breakthrough {
    width: 85%;
    margin: 0 auto;
    padding: $space 0;
    display: flex;
    flex-direction: column;
    align-items: center;

    .difficult-breakthrough__header {
      display: flex;
      flex-direction: column;
      align-items: center;

      .difficult-breakthrough__header__title {
        color: white;

        span {
          color: $dark-yellow;
        }
      }

      .difficult-breakthrough__header__miniTitle {
        color: $middle-yellow;
      }
    }
    }

    .difficult-breakthrough__footer {
      width: 100%;

      .item-main {
        min-height: 380px;
        height: 380px;
        padding: 50px;
        border-radius: 30px;
        -webkit-border-radius: 30px;
        -moz-border-radius: 20px;
        list-style: none;
        border: 1px solid $middle-yellow;
      }

      .item__title{
        color: white;
      }
      .item__content{

        .item__subTitle{
          color: white;
          margin-top: 20px;
        }
        .item__text{
          color: #cecece;
          line-height: 1.5em;
        }
      }

      .swiper-button-prev,
      .swiper-button-next {
        color: $middle-yellow;
      }
      .swiper-pagination {
      }
    }

    .member-content {
      width: 90%;
      margin: 0 auto;
      padding: $space 0 0 0;
      display: flex;
      flex-direction: column;
      align-items: center;

      .member-content__header {
        display: flex;
        flex-direction: column;
        align-items: center;

        .member-content__header__title {
          color: $dark-yellow;
        }

        .member-content__header__miniTitle {
          color: $light-yellow;
        }
      }

      .member-content__main {
        width: 100%;
        margin: 50px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        flex-wrap: wrap;

        .member-content__main__item {
          margin: 20px;
        }
      }
    }

    .footer {
      width: 100%;
      margin-top: 100px;
      color: white;

      .footer__conclusion {
        position: relative;
        z-index: 999;
        width: 95%;
        margin: 0 auto;
        border-radius: 10px;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        color: $middle-yellow;
        background-color: $dark-blue;
        $blank: 50px;

        .footer__conclusion__title {
          padding: 30px 0 0 $blank;
        }

        p {
          margin: 0 auto;
          padding: 30px $blank 100px $blank;
        }
      }

      .footer__infos {
        width: 100%;
        margin-top: -180px;
        padding-top: 180px;
        background-color: $dark-yellow;
        display: flex;
        justify-content: space-evenly;

        .footer__info-item {
          padding: 30px 10px;

          .footer__info-item__name {
            padding-bottom: 10px;
            margin-bottom: 10px;
            border-bottom: 1px solid white;
          }

          a {
            text-decoration: none;

            &:visited, &:link {
              color: white;
            }

            &:hover {
              color: $light-yellow;
            }
          }
        }
      }

      .footer__copyright {
        width: 100%;
        padding: 20px 0;
        background-color: $dark-yellow;
        display: flex;
        flex-direction: column;
        align-items: center;
      }
  }

</style>
<style lang="scss">
  $light-yellow: #F0DFB3;
  .swiper-pagination-bullet-active{
    background-color: $light-yellow !important;
  }
</style>
